<template>
 <div class="border-1 border-r">
    <div class="flex-s-around  font-25 font-f-ib fontW-7 color-f bd-b-1 h-40">
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">
        <div style="margin: 0 20%;">{{$t('detail.user')}}</div>
      </div>
      <div class="text-r font-25 font-f-ib fontW-7 flex-1">
        <div style="margin: 0 50% 0 0;"> <img src="../../assets/icon/offer.svg" alt=""> {{$t('detail.offer')}}</div>
      </div>
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">{{$t('detail.add')}}</div>
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">{{$t('detail.percent')}}</div>
      <div class="text-l font-25 font-f-ib fontW-7 flex-1">{{$t('detail.time')}}</div>
    </div>
    <div class="item color-f font-20 h-3 mgtb-10 flex" v-for="item in offerData" :key="item.id">
      <div class="flex-1">
        <div style="margin: 0 5%;"><img :src="item.img_url" alt="" class="mar-10"> {{item.name}}</div>
      </div>
      <div class="flex-1 text-r">
        <div style="margin: 0 50% 0 0;">{{item.offer}}</div>
      </div>
      <div class="color-5c9af6 flex-1">{{item.address}}</div>
      <div class="flex-1" :class="{'color-04f0':Number(item.num)==1,'color-ff00':Number(item.num)==2}">{{item.percent}}</div>
      <div class="flex-1">{{item.time}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['offerData']
}
</script>
<style lang="less" scoped>
</style>
